window.onload = function() {
    var lik = document.getElementsByClassName("pics");

    function fun(i, j) {
        lik[i].style.opacity = 1;
        lik[j].style.opacity = 0;
    }
    fun(0, 1);
    var i = 0;
    setInterval(function() {
        if (++i >= 4) {
            i = 0;
            fun(0, 3);
        } else fun(i, i - 1);
    }, 2000);
};

const car = document.querySelector(".con-pics");
const carImg = document.querySelectorAll(".con-pics img");
// const carI = document.querySelectorAll(".con-pics");

//buttons
const left = document.querySelector("#btn-left");
const right = document.querySelector("#btn-right");

//counter
let counter = 1;
// const size = carI[0].clientWidth;
let size = 886;

car.style.transform = "translateX(" + -size * counter + "px)";

//button listeners
right.addEventListener("click", () => {
    car.style.transition = "transform 0.4s ease-in-out";
    counter++;
    car.style.transform = "translateX(" + -size * counter + "px)";
});

left.addEventListener("click", () => {
    car.style.transition = "transform 0.4s ease-in-out";
    counter--;
    car.style.transform = "translateX(" + -size * counter + "px)";
});
////循环
car.addEventListener("transitionend", () => {
    console.log(carImg[counter]);
    if (carImg[counter].id === "lastClone") {
        car.style.transition = "none";
        counter = carImg.length - 2;
        car.style.transform = "translateX(" + -size * counter + "px)";
    }
    if (carImg[counter].id === "firstClone") {
        car.style.transition = "none";
        counter = carImg.length - counter;
        car.style.transform = "translateX(" + -size * counter + "px)";
    }
});

//////////////// 左导航/////////////////

$(".link-area .tab-list li").on("mouseenter", function() {
    if (!$(this).hasClass("current")) {
        $(".link-area .tab-list li").removeClass("current");
        $(this).addClass("current");
        $(".link-area .con").hide();
        $(".link-area .con_" + $(this).data("num")).fadeIn();
    }
});